<template>
  <div class="detail">
    <h3 v-if="name!==''"
        class="title">搜索&ensp;{{ name }}</h3>
    <div class="main">
      <div class="tab">
        <span v-for="(item,index) in navTab"
              :key="index"
              :class="{isActive:tabIndex==item.id}"
              @click="changeTabIndex(item.id)">{{ item.name }}</span>
        <span style="float:right"
              v-show="length!==0">{{ length }}</span>
      </div>
      <div class="danqu"
           v-if=" tabIndex==1">
        <div class="buttons">
          <button>
            <svg class="icon cc"
                 aria-hidden="true">
              <use xlink:href="#icon-shipinbofangshibofang"></use>
            </svg>
            播放全部</button>
          <button class="bofang">
            <svg class="icon cc"
                 aria-hidden="true">
              <use xlink:href="#icon-cangpeitubiao_xiazaipandiandanxiazaidayinmoban"></use>
            </svg>
            下载全部</button>
        </div>
        <ItemList :songlist="searchList"
                  style="margin-left:-10px"></ItemList>
      </div>
      <div class="singer"
           v-if="tabIndex==100">
        <li v-for="sg in singerList"
            :key="sg.id"
            @click="toPath(sg.id)">
          <img v-lazy="sg.img1v1Url"
               class="s-img">
          <span style="margin-left:10px;font-size:14px">{{ sg.name }}</span>
          <span v-for="al in sg.alia"
                :key="al"
                style="margin-left:3px;color:#666;font-size:13px">({{ al }})</span>
          <span class="user">
            <svg class="icon cc"
                 aria-hidden="true"
                 style="font-size:15px;border-radius: 7.5px">
              <use xlink:href="#icon-yonghu1"></use>
            </svg></span>
        </li>
      </div>
      <div class="Album singerList"
           v-if="tabIndex== 10">
        <Album :Album="AlbumList"></Album>
      </div>
      <div class="shiping singer"
           v-if="tabIndex==1014">
        <Mv :list="MvList"
            type="coverUrl"></Mv>
      </div>
      <div class="singerList"
           v-if="tabIndex==1000">
        <SingerList :list=" SongList"></SingerList>
      </div>
      <!-- <div class="volid singerList"
           v-if="tabIndex==2000">
        <volid></volid>
      </div> -->
      <div class="singerList"
           v-if="tabIndex==1002">
        <user :list="userList"></user>
      </div>
    </div>
  </div>
</template>

<script>
import user from "@/components/Singer/user.vue"
import volid from "@/components/Singer/voild.vue"
import SingerList from "@/components/Singer/SingerList.vue"
import Mv from "@/components/mvList/mvList.vue"
import Album from "@/pages/Albums/Albums.vue"
import { search } from "@/api/search"
import ItemList from "@/pages/HomeItem/ItemList"
export default {
  data () {
    return {
      searchList: [],
      name: '',
      length: 0,
      tabIndex: 1,
      navTab: [{ name: '单曲', id: 1 }, { name: '歌手', id: 100 },
      { name: '专辑', id: 10 }, { name: '视频', id: 1014 },
      { name: '歌单', id: 1000 }, { name: '歌词', id: 1006 },
      { name: '声音', id: 2000 }, { name: '用户', id: 1002 },],
      queryInfo: {
        limit: 100,
        offset: 0,
        type: 1,
        keywords: ''
      },
      singerList: [],//歌手列表
      AlbumList: [],//专辑列表
      MvList: [],//mv列表
      SongList: [],//歌单列表
      userList: [],//用户列表
    }
  },
  components: { ItemList, Album, Mv, SingerList, volid, user },
  mounted () {
    //全局事件总线
    this.$bus.$on('keyword', (KeyWord) => {
      this.name = KeyWord
      this.queryInfo.keywords = KeyWord
      //  触发搜索
      this.search(this.queryInfo)
    })
    this.name = this.$route.query.keywords
    this.queryInfo.keywords = this.$route.query.keywords
    //  触发搜索
    this.search(this.queryInfo)
  },
  beforeDestroy () {
    this.$bus.$off('keyword');//用完后记得顺手丢掉销毁哦
  },
  methods: {
    changeTabIndex (id) {
      this.tabIndex = id
      //更新type
      this.queryInfo.type = id
      //  触发搜索
      this.search(this.queryInfo)
    },
    // 搜索
    async search (queryInfo) {
      let res = await search(queryInfo)
      if (res.code !== 200) return
      // 单曲
      this.searchList = res.result.songs
      // 歌手
      this.singerList = res.result.artists
      // 专辑
      this.AlbumList = res.result.albums
      // mv
      this.MvList = res.result.videos
      // 歌单
      this.SongList = res.result.playlists
      // 用户
      this.userList = res.result.userprofiles
    },
    // 去歌手详情
    toPath (id) {
      this.$router.push({ path: '/singerdetail', query: { id } })
    }
  },
  watch: {

  }
}
</script>
<style scoped lang="less">
.detail {
  .title {
    margin-top: 20px;
    margin-left: 30px;
  }
  .main {
    position: absolute;
    width: 100%;
    top: 90px;
    .tab {
      margin-left: 25px;
      height: 30px;
      line-height: 30px;
      width: auto;
      span {
        float: left;
        padding-right: 20px;
        cursor: pointer;
        width: 60px;
        text-align: center;
        &.isActive {
          transition: 0s;
          font-size: 14px;
          font-weight: bold;
          transition: none;
          transition-duration: 0;
          &::after {
            display: block;
            content: "";
            height: 2px;
            width: 60%;
            margin: 0 auto;
            background-color: #ec4141;
            border-radius: 1px;
          }
        }
      }
    }
    .danqu {
      margin-left: 30px;
      .buttons {
        height: 30px;
        margin-top: 20px;
        button {
          display: block;
          float: left;
          padding-left: 34px;
          padding-right: 16px;
          margin-right: 10px;
          height: 34px;
          color: #fff;
          background-color: #ec4141;
          border: none;
          border-radius: 15px;
          line-height: 34px;
          font-weight: bold;
          font-size: 15px;
          position: relative;
          &:hover {
            opacity: 0.9;
            background-color: #dcdcdc;
          }
          .cc {
            display: block;
            position: absolute;
            top: 7px;
            left: 0px;
            width: 18px;
            height: 18px;
            margin-left: 14px;
          }
        }
        .bofang {
          background-color: #fff;
          border: 1px solid #d9d9d9;
          color: #000;
          font-weight: normal;
        }
      }
    }
    .singer {
      margin-left: 30px;
      margin-top: 20px;
      width: 100%;
      li {
        width: 95%;
        list-style: none;
        margin-bottom: 20px;
        .s-img {
          vertical-align: middle;
          width: 60px;
          height: 60px;
          border-radius: 5px;
        }
        .user {
          float: right;
          clear: both;
          display: block;
          margin-top: 20px;
          width: 20px;
          height: 20px;
          background-color: red;
          border-radius: 10px;
        }
      }
    }
    .singerList {
      margin-top: 20px;
      width: 100%;
    }
  }
}
</style>